<!-- 会员中心页面 -->
<template>
	<view class="member" v-if="loading">
		
		<block v-if="vip==true">
			
			<view class="nickname">
				<view class="user">
					<!-- 头像区域-->
					<view class="area">
						<u-avatar :size="85" :src="toImages(userInfo.avatar)"></u-avatar>
						<view class="datum">
							<text class="datum-text">{{ userInfo[$t('item.user.username')] }}</text>
							<text class="datum-text2" v-if="userLoading">
								{{ $t(userInfo.vip.name) }}
								<text v-if="userInfo.level > 0">
									-{{ $t('有效期至') }}：{{ userInfo.vip_expire_time }}
								</text>
							</text>
						</view>
					</view>
			
					<view class="vipText">
						
						<view style="display: flex;width: 100%;">
							<view class="number">
								{{vipList[urrent].release_num}} <br>
								<text style="font-size: 24rpx;">{{ $t('免费发布推广条数(每天)') }}</text>
							</view>
							<view class="number">
								{{vipList[urrent].release_num}} <br>
								<text style="font-size: 24rpx;">{{ $t('免费发布竞标条数(每天)') }}</text>
							</view>
						</view>
						
						<view style="display: flex;width: 100%;">
							<view class="number">
								{{vipList[urrent].topping_num}} <br>
								<text style="font-size: 24rpx;">{{ $t('推广置顶条数(单月)') }}</text>
							</view>
							<view class="number">
								{{vipList[urrent].join_num || 0}} <br>
								<text style="font-size: 24rpx;">{{ $t('免费参与竞标次数(每天)') }}</text>
							</view>
						</view>
						
					</view>
				</view>
			
			</view>
			
			<!-- 导航栏 -->
			<view class="nav">
				<view class="list">
					<li @click="Active(index)" v-for="(item,index) in vipList" :key="item.title">
						<text :class="[toClass(index)]">{{ $t(item.name) }}</text>
					</li>
				</view>
				<swiper class="swiper" circular @change="EventHandle" :current="urrent">
					<swiper-item>
						<view class="swiper-item uni-bg-red">
							<!-- 滑块内容 -->
							<view class="_list">
								<ol>
									<!-- <li :class="[toClassj('om_price')]" @click="clickClass('om_price')">
										<view class="li-text">
											{{ $t('一个月') }}
										</view>
										<view class="li-money">
											￥{{ vipList[urrent].om_price }}
										</view>
									</li>
									<li :class="[toClassj('tm_price')]" @click="clickClass('tm_price')">
										<view class="li-text">
											{{ $t('三个月') }}
										</view>
										<view class="li-money">
											￥{{ vipList[urrent].tm_price }}
										</view>
									</li> -->
									<li :class="[toClassj('oy_price')]" @click="clickClass('oy_price')">
										<view class="li-text">
											{{ $t('一年') }}
										</view>
										<view class="li-money">
											￥{{ vipList[urrent].oy_price }}
										</view>
									</li>
			
								</ol>
							</view>
							<!-- 支付 -->
							<u-radio-group class="radio">
								<view class="Alipay">
									<view class="_Alipay">
										<view class="_Alipay-text">
											<image :src='serverImageUrl("/static/images/user/MemberCenter/weixin@2x.png")' mode="">
												{{ $t('微信支付') }}
											</image>
										</view>
										<u-radio :name="wname" @change="choosePayType">
										</u-radio>
									</view>
									<u-line color="#E7E7E7" v-if="plat === 'app'" />
									<view class="_Alipay" v-if="plat === 'app'">
										<view class="_Alipay-text">
											<image :src='serverImageUrl("/static/images/user/MemberCenter/zhifubao@2x.png")' mode="">
												{{ $t('支付宝支付') }}
											</image>
										</view>
										<u-radio :name="zname" @change="choosePayType">
										</u-radio>
									</view>
								</view>
							</u-radio-group>
							<!-- 按钮 -->
							<view class="layout">
								<!-- 站位，用于自适应 -->
								<view class="" style="height: 2rpx; width: 100%;"></view>
								<!-- -->
								
								<view style="width: 100%;display: flex;position: relative; margin-bottom: 10rpx;">
									<view :class="currentOrderId==1?'xuanzhong':''"
									style="border: 1px solid #ccc;width: 30rpx; border-radius: 30rpx; margin-top: 1.5px; margin-right: 10rpx; height: 30rpx" 
									@click="selectOrder(1)">
									</view>
									<view style="color: royalblue;" @click.stop="showXy2">
										{{$t('APP付费会员服务协议')}}
									</view>
								</view>
								
								
								
								<u-button @click="buyVip" type="primary" :custom-style="customStyle" hover-class="none">
									{{ $t('立即充值') }}
								</u-button>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-red">
							<!-- 滑块内容 -->
							<view class="_list">
								<ol>
									<li :class="[toClassj('om_price')]" @click="clickClass('om_price')">
										<view class="li-text">
											{{ $t('一个月') }}
										</view>
										<view class="li-money">
											￥{{ vipList[urrent].om_price }}
										</view>
									</li>
									<li :class="[toClassj('tm_price')]" @click="clickClass('tm_price')">
										<view class="li-text">
											{{ $t('三个月') }}
										</view>
										<view class="li-money">
											￥{{ vipList[urrent].tm_price }}
										</view>
									</li>
									<li :class="[toClassj('oy_price')]" @click="clickClass('oy_price')">
										<view class="li-text">
											{{ $t('一年') }}
										</view>
										<view class="li-money">
											￥{{ vipList[urrent].oy_price }}
										</view>
									</li>
								</ol>
							</view>
							<!-- 支付 -->
							<u-radio-group class="radio">
								<view class="Alipay">
									<view class="_Alipay">
										<view class="_Alipay-text">
											<image :src='serverImageUrl("/static/images/user/MemberCenter/weixin@2x.png")' mode="">
												{{ $t('微信支付') }}
											</image>
										</view>
										<u-radio :name="wname" @change="choosePayType">
										</u-radio>
									</view>
									<u-line color="#E7E7E7" v-if="plat === 'app'" />
									<view class="_Alipay" v-if="plat === 'app'">
										<view class="_Alipay-text">
											<image :src='serverImageUrl("/static/images/user/MemberCenter/zhifubao@2x.png")' mode="">
												{{ $t('支付宝支付') }}
											</image>
										</view>
										<u-radio :name="zname" @change="choosePayType">
										</u-radio>
									</view>
								</view>
							</u-radio-group>
							<!-- 按钮 -->
							<view class="layout">
								<!-- 站位，用于自适应 -->
								<view class="" style="height: 2rpx; width: 100%;"></view>
								<!-- -->
								
								<view style="width: 100%;display: flex;position: relative; margin-bottom: 10rpx;">
									<view :class="currentOrderId==1?'xuanzhong':''"
									style="border: 1px solid #ccc;width: 30rpx; border-radius: 30rpx; margin-top: 1.5px; margin-right: 10rpx; height: 30rpx" 
									@click="selectOrder(1)">
									</view>
									<view style="color: royalblue;" @click.stop="showXy2">
										{{$t('APP付费会员服务协议')}}
									</view>
								</view>
								
								<u-button @click="buyVip" type="primary" :custom-style="customStyle" hover-class="none">立即充值
								</u-button>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-red">
							<!-- 滑块内容 -->
							<view class="_list">
								<ol>
									<li :class="[toClassj('om_price')]" @click="clickClass('om_price')">
										<view class="li-text">
											{{ $t('一个月') }}
										</view>
										<view class="li-money">
											￥{{ vipList[urrent].om_price }}
										</view>
									</li>
									<li :class="[toClassj('tm_price')]" @click="clickClass('tm_price')">
										<view class="li-text">
											{{ $t('三个月') }}
										</view>
										<view class="li-money">
											￥{{ vipList[urrent].tm_price }}
										</view>
									</li>
									<li :class="[toClassj('oy_price')]" @click="clickClass('oy_price')">
										<view class="li-text">
											{{ $t('一年') }}
										</view>
										<view class="li-money">
											￥{{ vipList[urrent].oy_price }}
										</view>
									</li>
								</ol>
							</view>
							<!-- 支付 -->
							<u-radio-group class="radio">
								<view class="Alipay">
									<view class="_Alipay">
										<view class="_Alipay-text">
											<image :src='serverImageUrl("/static/images/user/MemberCenter/weixin@2x.png")' mode="">
												{{ $t('微信支付') }}
											</image>
										</view>
										<u-radio :name="wname" @change="choosePayType">
										</u-radio>
									</view>
									<u-line color="#E7E7E7" v-if="plat === 'app'" />
									<view class="_Alipay" v-if="plat === 'app'">
										<view class="_Alipay-text">
											<image :src='serverImageUrl("/static/images/user/MemberCenter/zhifubao@2x.png")' mode="">
												{{ $t('支付宝支付') }}
											</image>
										</view>
										<u-radio :name="zname" @change="choosePayType">
										</u-radio>
									</view>
								</view>
							</u-radio-group>
							<!-- 按钮 -->
							<view class="layout">
								<!-- 站位，用于自适应 -->
								<view class="" style="height: 2rpx; width: 100%;"></view>
								<!-- -->
								
								<view style="width: 100%;display: flex;position: relative; margin-bottom: 10rpx;">
									<view :class="currentOrderId==1?'xuanzhong':''"
									style="border: 1px solid #ccc;width: 30rpx; border-radius: 30rpx; margin-top: 1.5px; margin-right: 10rpx; height: 30rpx" 
									@click="selectOrder(1)">
									</view>
									<view style="color: royalblue;" @click.stop="showXy2">
										{{$t('APP付费会员服务协议')}}
									</view>
								</view>
								
								
								<u-button @click="buyVip" type="primary" :custom-style="customStyle" hover-class="none">
									{{ $t('立即充值') }}
								</u-button>
							</view>
						</view>
					</swiper-item>
				</swiper>
				
				<u-popup v-model="showPopup2" >
					<view class="xy-popup">
						<u-parse :html="xyContent2.content"></u-parse>
						<button @click="guanbi" style="margin-top: 50rpx;width: 80%;">
							{{$t('关闭')}}
						</button>
					</view>
				</u-popup>
				
				
			</view>
				
				
				
		</block>
		
		<block v-if="vip==false">
			
			<view class="popup-warp" >
				<image :src="HTTP_IMG_UTL+'/quanxian.png'" style="border-radius: 0px;width: 80%; margin-left: 10%; margin-top: 30%;"></image>
			</view>
			
		</block>
		
		
	</view>
</template>

<script>
	import {
		getOpenid,
		isBase64
	} from "@/common/public";
	import { IMAGE_URL,HTTP_IMG_UTL } from '@/config/app';
	

	export default {
		data() {
			return {
				currentOrderId:0,
				off: '',
				loading: false,
				userLoading: false,
				userInfo: {},
				vipList: [],
				customStyle: {
					width: '656rpx',
					height: '63rpx',
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '26rpx',
				},
				wname: 'wx', //支付方式
				zname: 'zfb',
				urrent: 0, //滑块
				active: false, //添加类名
				current: "om_price",
				showPopup2:false,
				xyContent2: '',
				pay_type: '',
				openid: '',
				plat: '',
				
				HTTP_IMG_UTL,
				vip:false
			};
		},
		async onLoad() {
			this.openid = await getOpenid(this.$u)
			this.getUserInfo();
			this.getVipSet();
			this.plat = uni.getStorageSync('plat')
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("会员中心")
			})
			
			this.$u.api.user.appCheck().then(res => {
				this.report = res.report
				this.vip = res.vip
			})
		},
		methods: {
			async getUserInfo() {
				const that = this
				let user = await that.$u.api.user.getUserInfo();
				this.userInfo = user
				this.userLoading = true
			},
			async getVipSet() {
				const that = this
				let vipList = await that.$u.api.user.getVipSet();
				this.vipList = vipList
				this.loading = true
			},
			Active(value) {
				this.urrent = value
			},
			EventHandle(e) {
				this.urrent = e.detail.current
			},
			clickClass(value) {
				this.current = value
			},
			selectOrder(orderId) {
				if(this.currentOrderId==0){
					this.currentOrderId = orderId;
				}else{
					this.currentOrderId = 0;
				}
			},
			showXy2() {
				this.$u.api.basic.getContentData({
					type: "APP付费会员服务协议",
					nowlang:getApp().globalData.lang
				}).then(res => {
					this.xyContent2 = res
				})
				this.showPopup2 = true
			},
			guanbi(){
				this.showPopup=false
				this.showPopup2=false
			},
			buyVip() {
				const plat = this.plat
				const that = this
				
				if (this.currentOrderId==0) {
					that.$u.toast(this.$t('请阅读并勾选APP付费会员服务协议'))
					return
				}
				
				if (that.plat === 'web') {
					that.$u.toast(this.$t('请在小程序或App中支付'))
					return
				}
				if (that.pay_type === '') {
					that.$u.toast(this.$t('请选择支付方式'))
					return false
				}
				let pay_type = that.pay_type === 'wx' ? 'wxpay' : 'alipay'
				that.$u.api.user.createVipOrder({
					vip_id: that.vipList[that.urrent].vip_id,
					vip_type: that.current,
					vip_price: that.vipList[that.urrent][that.current],
					pay_type: pay_type,
					openid: that.openid,
					method: plat
				}).then(res => {
					console.log(res)
					if (that.plat === 'mp-weixin') {
						if (pay_type === 'wxpay') {
							uni.requestPayment({
								timeStamp: res.timeStamp,
								nonceStr: res.nonceStr,
								package: res.package,
								signType: res.signType,
								paySign: res.paySign,
								provider: pay_type,
								success: function(res) {
									console.log('success-viporder:' + JSON.stringify(res));
									that.$u.toast(that.$t('操作成功'))
									setTimeout(() => {
										that.$u.route({
											url: '/pages/tabbar/user/index',
											type: 'switchTab'
										})
									}, 2000)
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									that.$u.toast("cancel")
								}
							});
						} else {
							uni.requestPayment({
								provider: pay_type,
								orderInfo: res, //支付宝订单数据
								success: (res) => {
									console.log('success-viporder:' + JSON.stringify(res));
									that.$u.toast(that.$t('操作成功'))
									setTimeout(() => {
										that.$u.route({
											url: '/pages/tabbar/user/index',
											type: 'switchTab'
										})
									}, 2000)
								},
								fail: (err) => {
									console.log('fail:' + JSON.stringify(err));
									that.$u.toast("cancel")
								},
							});
						}
					}else{
						uni.requestPayment({
							provider: pay_type,
							orderInfo: res, //支付宝订单数据
							success: (res) => {
								console.log('success-viporder:' + JSON.stringify(res));
								that.$u.toast(that.$t('操作成功'))
								setTimeout(() => {
									that.$u.route({
										url: '/pages/tabbar/user/index',
										type: 'switchTab'
									})
								}, 2000)
							},
							fail: (err) => {
								console.log('fail:' + JSON.stringify(err));
								that.$u.toast("cancel")
							},
						});
					}
				})
			},
			choosePayType(e) {
				this.pay_type = e
			}
		},
		computed: {
			toClassj() {
				return (value) => {
					return this.current === value ? 'bianse' : ''
				}
			},
			toClass() {
				return (value) => {
					return this.urrent === value ? 'active' : ''
				}
			},
			toImages() {
				return (src) => {
					return isBase64(src) ? src : IMAGE_URL + src
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.member {
		display: flex;
		flex-direction: column;
		height: 150vh;
		overflow: scroll;
		background-color: #f9f9f9;
	}

	.nickname {
		padding: 40rpx 15rpx 60rpx 22rpx;
		// height: 330rpx;
		background: linear-gradient(180deg, rgba(255, 120, 14, 0.62) 49%, rgba(255, 253, 251, 0.77) 100%, rgba(255, 255, 255, 0.78) 100%);
	}

	.user {
		// height: 231rpx;
		background-image: url($my-bg-url+ '20231101/b1d72973ebd9ae3488a689116f561304.png');
		background-size: cover;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 40rpx;
	}

	.area {
		display: flex;
		margin: 26rpx 0 0 31rpx;
	}

	.datum {
		display: flex;
		flex-direction: column;
		margin-left: 17rpx;
		font-size: 28rpx;
		line-height: 38rpx;
		color: rgba(255, 255, 255, 0.88);

	}

	.datum-text {
		font-weight: 600;
	}

	.datum-text2 {
		font-weight: 400;
	}

	.vipText {
		color: #fff;
		text-align: center;

		.number {
			width: 50%;
			font-size: 63rpx;
			margin-top: 40rpx;
		}
	}

	.icon {
		display: flex;
		margin-left: 38rpx;
		//   margin-top: 61rpx;
		word-break: break-all;

		.icon_icon {
			display: flex;
			align-items: center;

			text {
				font-size: $my-font-size21;
				flex: 1;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.88);
				line-height: 30rpx;
				margin-left: 8rpx;
				margin-right: 17rpx;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				display: -webkit-box;
			}
		}
	}

	.nav {
		flex: 1;
	}

	.list {
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}

	li {
		list-style-type: none;
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 31rpx;

		font-weight: 600;
		color: rgba(0, 0, 0, 0.88);
		line-height: 44rpx;

		text {
			padding-bottom: 20rpx;
			word-break: break-all;
		}
	}

	.active {
		color: #F88533;
		border-bottom: 2px solid #F88533;
		box-sizing: border-box;
		word-break: break-all;
	}

	.swiper {
		padding: 0 26rpx 0 22rpx;
		height: calc(120vh - 760rpx);
	}

	._list {
		margin-top: 50rpx;

		ol {
			list-style-type: none;
			display: flex;
			//flex-wrap: wrap;
			padding: 0;
			justify-content: space-around;
			// height: 369rpx;
			align-content: space-between;

			li {
				width: 180rpx;
				height: 171rpx;
				background: #FFFFFF;
				box-shadow: 3rpx 9rpx 7rpx 0rpx rgba(225, 225, 225, 0.5);
				border-radius: 14rpx;
				color: rgba(0, 0, 0, 0.88);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 34rpx;
				padding: 10rpx;
				margin: 10rpx;

				.li-text {
					font-size: 31rpx;
					word-break: break-all;
					font-weight: 600;
					line-height: 44rpx;
					margin-bottom: 24rpx;
				}

				.li-money {
					font-size: 28rpx;

					font-weight: bold;
					line-height: 49rpx;
					letter-spacing: 1px;
				}
			}
		}
	}

	.bianse {
		background: linear-gradient(137deg, #DD2910 0%, #F79929 100%) !important;
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(240, 240, 240, 0.5) !important;
		border-radius: 14rpx !important;
		font-size: 49rpx !important;
		font-family: Helvetica-Bold, Helvetica !important;
		font-weight: bold !important;
		color: rgba(255, 255, 255, 0.88) !important;
		line-height: 59rpx !important;
		letter-spacing: 1px !important;
		word-break: break-all;
	}

	.Alipay {
		width: 100%;
		// height: 187rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		display: flex;
		flex-direction: column;
		padding: 0 36rpx 0 38rpx;

		image {
			width: 45rpx;
			height: 45rpx;
			margin-right: 20rpx;
		}

		._Alipay {
			width: 100%;
			height: 93rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;

			font-weight: 400;
			color: #000000;
			line-height: 35rpx;
		}

		._Alipay-text {
			display: flex;
			align-items: center;
		}
	}

	.swiper-item {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.radio {
		width: 100%;
		margin-top: 34rpx;
	}
	
	.layout{
		    flex: 1;
		    align-items: flex-end;
		    margin-top: 70rpx;
		    padding-bottom: 20rpx;
		    align-items: center;
			justify-content:unset;
	}
	.xuanzhong{background-color: orangered;}
	
	.xy-popup {
		margin-top: 20px;
		margin-bottom: 80px;
		width: 100%;
		padding: 20rpx 20rpx 60rpx 20rpx;
	}
	
	.xy-popup-title {
		color: #DE2D11;
		text-align: center;
		font-weight: 500;
	}
</style>